<template>
    <div>
		<el-row style="margin-bottom:20px">
			<el-tabs v-if="Object.keys(passLabel).length !== 0" v-model="active" type="border-card" style="margin-bottom:20px">
				<el-tab-pane label="脚本统计" name="1">
					<el-row :gutter="30">
							<el-col :xs="24" :sm="24" :lg="6">
									<info_label
										:type="common.type4"
										:title="'脚本数量'"
										:num="String(caseCount)"
										:sub="'个'"
										:to_sub="common.to_sub"
										:cls="common.success"
									></info_label>
							</el-col>

							<el-col :xs="24" :sm="24" :lg="6">
									<info_label
										:type="common.type4"
										:title="'新增脚本数量'"
										:num="String(newCaseCount)"
										:sub="'个'"
										:to_sub="common.to_sub"
										:cls="common.success"
									></info_label>
							</el-col>

							<el-col :xs="24" :sm="24" :lg="6">
									<info_label
										:type="common.type4"
										:title="'回退问题检出个数'"
										:num="String(issue)"
										:sub="'个'"
										:to_sub="common.to_sub"
										:cls="common.success"
									></info_label>
							</el-col>
					</el-row>
				</el-tab-pane>

				<el-tab-pane label="自动化测试" name="2">
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
								<info_label
									:type="common.type4"
									:title="common.titles[19]"
									:num="getFix(labelsData.test_count)"
									:sub="common.subs[0]"
									:to_sub="common.to_sub"
									:cls="common.success"
								></info_label>
							</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="'cts'"
								:num="String(passLabel.cts.count)"
								:sub="'次'"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="'endurance'"
								:num="String(passLabel.endurance.count)"
								:sub="'次'"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="'function'"
								:num="String(passLabel.function.count)"
								:sub="'次'"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>
					</el-row>

					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="'it'"
								:num="String(passLabel.it.count)"
								:sub="'次'"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="'monkey'"
								:num="String(passLabel.monkey.count)"
								:sub="'次'"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="'mtbf'"
								:num="String(passLabel.mtbf.count)"
								:sub="'次'"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="'performance'"
								:num="String(passLabel.performance.count)"
								:sub="'次'"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>
					</el-row>

					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="'stress'"
								:num="String(passLabel.stress.count)"
								:sub="'次'"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="'ut'"
								:num="String(passLabel.ut.count)"
								:sub="'次'"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="'web'"
								:num="String(passLabel.web.count)"
								:sub="'次'"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="自动化测试通过率" name="3">
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'cts'"
								:num="formatter_rate(passLabel.cts.pass_rate)"
								:sub="'%'"
								:to_sub="common.type3"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'endurance'"
								:num="formatter_rate(passLabel.endurance.pass_rate)"
								:sub="'%'"
								:to_sub="common.type3"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'function'"
								:num="formatter_rate(passLabel.function.pass_rate)"
								:sub="'%'"
								:to_sub="common.type3"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'it'"
								:num="formatter_rate(passLabel.it.pass_rate)"
								:sub="'%'"
								:to_sub="common.type3"
								:cls="common.success"
							></info_label>
						</el-col>
					</el-row>

					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'monkey'"
								:num="formatter_rate(passLabel.monkey.pass_rate)"
								:sub="'%'"
								:to_sub="common.type3"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'mtbf'"
								:num="formatter_rate(passLabel.mtbf.pass_rate)"
								:sub="'%'"
								:to_sub="common.type3"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'performance'"
								:num="formatter_rate(passLabel.performance.pass_rate)"
								:sub="'%'"
								:to_sub="common.type3"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'stress'"
								:num="formatter_rate(passLabel.stress.pass_rate)"
								:sub="'%'"
								:to_sub="common.type3"
								:cls="common.success"
							></info_label>
						</el-col>
					</el-row>

					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'ut'"
								:num="formatter_rate(passLabel.ut.pass_rate)"
								:sub="'%'"
								:to_sub="common.type3"
								:cls="common.success"
							></info_label>
						</el-col>

						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'web'"
								:num="formatter_rate(passLabel.web.pass_rate)"
								:sub="'%'"
								:to_sub="common.type3"
								:cls="common.success"
							></info_label>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>

			<div style="margin-bottom: 20px;" class="wrapper">
			<el-row :gutter="30">
        <el-col :xs="24" :sm="24" :lg="12">
					<el-card class="box-card m-b" shadow="never">
						<div slot="header" class="clearfix" style="vertical-align:middle">
							<div style="float: left; padding: 10px 0">排名</div>
							<el-radio-group v-model="caseSelected" style="float: right; padding: 3px 0" size="mini">
									<el-radio-button label="脚本数量"></el-radio-button>
									<el-radio-button label="新增脚本"></el-radio-button>
							</el-radio-group>
						</div>
						<div v-if="caseSelected == '脚本数量'">
								<VTable
										:rank="true"
										:tablesize="caseSize"
										:tablecurrent="caseCurrent"
										:tabletotal="caseTotal"
										:table-data="caseRank"
										:table-label="cases"
										@tableSizeChange="caseSizeChange"
										@tableCurrentImportDeptChange="caseCurrentChange"
								>
								</VTable>
						</div>

						<div v-else>
								<VTable
										:rank="true"
										:tablesize="newcaseSize"
										:tablecurrent="newcaseCurrent"
										:tabletotal="newcaseTotal"
										:table-data="newCaseRank"
										:table-label="newCase"
										@tableSizeChange="newcaseSizeChange"
										@tableCurrentImportDeptChange="newcaseCurrentChange"
								>
								</VTable>
						</div>
					</el-card>
        </el-col>

				<el-col :xs="24" :sm="24" :lg="12">
					<el-card class="box-card m-b" shadow="never">
						<div slot="header" class="clearfix" style="vertical-align:middle">
							<div style="float: left; padding: 10px 0">排名</div>
							<el-radio-group v-model="passSelected" style="float: right; padding: 3px 0" size="mini">
									<el-radio-button label="自动化测试覆盖率"></el-radio-button>
									<el-radio-button label="回退问题检出个数"></el-radio-button>
							</el-radio-group>
						</div>

						<div v-if="passSelected == '自动化测试覆盖率'">
							<VTable
									:rank="true"
									:tablesize="coverSize"
									:tablecurrent="coverCurrent"
									:tabletotal="coverTotal"
									:table-data="coverRateRank"
									:table-label="coverRate"
									@tableSizeChange="coverSizeChange"
									@tableCurrentImportDeptChange="coverCurrentChange"
							>
							</VTable>
						</div>

						<div v-else>
							<VTable
									:rank="true"
									:tablesize="backSize"
									:tablecurrent="backCurrent"
									:tabletotal="backTotal"
									:table-data="backRank"
									:table-label="back"
									@tableSizeChange="backSizeChange"
									@tableCurrentImportDeptChange="backCurrentChange"
							>
							</VTable>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

			<el-tabs type="border-card" v-model="activeName" style="margin-bottom:20px">
				<el-tab-pane label="Daily-build">
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.testD"
								:label_data="getFix(labelsData.daily_test_count)"
								:label_import="'big'"
								:label_avg="standardKPI.daily_test_count"
								:label_now="labelsData.daily_test_count"
								:label_good="kpi.daily_test_count"
								:label_precent="'num'"
								:nessary="true">
							</LabelGrid>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.rateD"
								:label_data="(labelsData.daily_pass_rate*100).toFixed(2)"
								:label_import="'big'"
								:label_avg="standardKPI.daily_pass_rate"
								:label_now="labelsData.daily_pass_rate"
								:label_good="kpi.daily_pass_rate"
								:label_precent="'precent'"
								:nessary="true">
							</LabelGrid>
						</el-col>
					</el-row>

					<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>自动化测试通过率排名</span>
						</div>
						<div>
							<ve-bar
								:data="topChartData2"
								:settings="chartSettings2"
								ref="vline0"
								:extend="topExtend"></ve-bar>
						</div>
					</el-card>

					<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>自动化测试通过率趋势</span>
						</div>
						<div>
							<ve-line
								:data="autoChartData"
								:settings="autoChartSettings"
								:data-empty="dataEmpty"
								ref="lline0"
								:data-zoom="dataZoom"
							></ve-line>
						</div>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="Verify-build">
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.testV"
								:label_data="getFix(labelsData.verify_test_count)"
								:label_import="'big'"
								:label_avg="standardKPI.verify_test_count"
								:label_now="labelsData.verify_test_count"
								:label_good="kpi.verify_test_count"
								:label_precent="'num'"
								:nessary="true">
								</LabelGrid>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.rateV"
								:label_data="(labelsData.verify_pass_rate*100).toFixed(2)"
								:label_import="'big'"
								:label_avg="standardKPI.verify_pass_rate"
								:label_now="labelsData.verify_pass_rate"
								:label_good="kpi.verify_pass_rate"
								:label_precent="'precent'"
								:nessary="true">
								</LabelGrid>
						</el-col>
					</el-row>

					<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>自动化测试通过率排名</span>
						</div>
						<div>
							<ve-bar
								:data="topChartData"
								:settings="chartSettings"
								ref="vline1"
								:extend="topExtend"></ve-bar>
						</div>
					</el-card>

					<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>自动化测试通过率趋势</span>
						</div>
						<div>
							<ve-line
								:data="autoChartData2"
								:settings="autoChartSettings"
								:data-empty="dataEmpty"
								ref="lline1"
								:data-zoom="dataZoom"
							></ve-line>
						</div>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="Release-build">
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="'自动化测试次数'"
								:num="String(labelsData.release_test_count)"
								:sub="common.subs[0]"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'自动化测试通过率'"
								:num="(labelsData.release_pass_rate*100).toFixed(2)"
								:to_sub="common.type3"
								:sub="'%'"
								:cls="common.success"
							></info_label>
						</el-col>
          </el-row>

					<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>自动化测试通过率排名</span>
						</div>
						<div>
							<ve-bar
								:data="topChartData3"
								:settings="chartSettings3"
								ref="vline2"
								:extend="topExtend"></ve-bar>
						</div>
					</el-card>

					<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>自动化测试通过率趋势</span>
						</div>
						<div>
							<ve-line
								:data="autoChartData3"
								:settings="autoChartSettings"
								:data-empty="dataEmpty"
								ref="lline2"
								:data-zoom="dataZoom"
							></ve-line>
						</div>
					</el-card>
				</el-tab-pane>
			</el-tabs>
		</el-row>


		<!-- <div slot="header" class="clearfix" style="padding:20px;background: #fff">
			<span>自动化测试通过率</span>
		</div>
		<el-tabs type="border-card" style="margin-bottom: 20px;background: #fff" v-model="activeName">
			<el-tab-pane name="0" label="verify-build">
				<ve-bar
				:data="topChartData"
				:settings="chartSettings"
				ref="vline0"
				:extend="topExtend"></ve-bar>
			</el-tab-pane>
			<el-tab-pane name="1" label="daily-build">
				<ve-bar
				:data="topChartData2"
				:settings="chartSettings2"
				ref="vline1"
				:extend="topExtend"></ve-bar>
			</el-tab-pane>
			<el-tab-pane name="2" label="release-build">
				<ve-bar
				:data="topChartData3"
				:settings="chartSettings3"
				ref="vline2"
				:extend="topExtend"></ve-bar>
			</el-tab-pane>
		</el-tabs> -->
		<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
			<div slot="header" class="clearfix">
				<span>自动化测试频率</span>
			</div>
			<div>
				<ve-bar
				:data="frequencyChartData"
				:settings="chartSettings3"
				:extend="topExtend">
				</ve-bar>
			</div>
    </el-card>


		<el-card class="box-card m-b" style="margin-bottom: 20px;" shadow="never">
			<div slot="header" class="clearfix">
				<span>云平台使用情况</span>
			</div>
			<div>
				<VTable
					:isShow="false"
					:border="true"
					:tablesize="userSize"
					:tablecurrent="userCurrent"
					:tabletotal="userTotal"
					:table-data="userTable"
					:table-label="userObj"
					@handleSortChange="handleSortChange"
					@tableSizeChange="userSizeChange"
					@tableCurrentImportDeptChange="userCurrentChange"
				>
				</VTable>
			</div>
		</el-card>

		<el-card class="box-card m-b" shadow="never">
			<div slot="header" class="clearfix">
				<span>项目列表</span>
			</div>
			<div>
				<el-table
					:data="currentData"
					:header-cell-style="{background:'#eef1f6'}"
					style="width: 100%"
					@sort-change="sortChange">
					<el-table-column prop="project_name" label="项目名" :sortable="'custom'" width="120"></el-table-column>
					<el-table-column prop="test_count" label="总测试数" sortable width="120"></el-table-column>
					<el-table-column prop="verify_test_count" label="verify-build测试次数(Verify-build)" sortable></el-table-column>
					<el-table-column prop="verify_pass_rate" label="测试通过率(Verify-build)" sortable></el-table-column>
					<el-table-column prop="daily_test_count" label="测试次数(Daily-build)" sortable></el-table-column>
					<el-table-column prop="daily_pass_rate" label="测试通过率(Daily-build)" sortable></el-table-column>
					<el-table-column prop="release_test_count" label="测试次数(Release-build)" sortable></el-table-column>
					<el-table-column prop="release_pass_rate" label="测试通过率(Release-build)" sortable></el-table-column>
					<!-- <el-table-column prop="av_pass_rate" label="测试通过率" sortable></el-table-column>
					<el-table-column prop="av_exec_rate" label="测试执行率" sortable></el-table-column> -->
				</el-table>
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 15, 50, 100]"
					:page-size="currentSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataCount">
				</el-pagination>
			</div>
		</el-card>
    </div>
</template>

<script>
import { pagingData } from './utils.js';
import { getKpi } from '@/api/kpi'
import common from '@/components/devops/get_data';
import info_label from '@/components/devops/info_label.vue';
import { getHeader } from '@/app.config';
import LabelGrid from '@/components/qa/Label.vue'
import { mapState } from 'vuex'
import VTable from '@/components/charts/table'
import 'v-charts/lib/style.css';
import 'echarts/lib/component/dataZoom';
export default {
	props: {
        params: Object
	},
	filters: {
		abs(num) {
			return abs(num)
		}
	},
	computed: {
		...mapState({
			standardKPI: state => state.standardKPI
		})
	},
	components: {
		info_label,
		LabelGrid,
		VTable
  },
  data () {
		this.dataZoom = [{type: 'slider', start: 0, end: 100}];
    return {
			common,
			deptlableinfo: {
				testV: {
					label_hname: '自动化测试次数',
					label_unit: '(次)',
					label_sname: '总计',
					label_class: 'success'
				},
				rateV: {
					label_hname: '自动化测试通过率',
					label_header: 'Avg',
					label_unit: '(%)',
					label_sname: '平均',
					label_class: 'success'
				},
				testD: {
					label_hname: '自动化测试次数',
					label_unit: '(次)',
					label_sname: '总计',
					label_class: 'success'
				},
				rateD: {
					label_hname: '自动化测试通过率',
					label_header: 'Avg',
					label_unit: '(%)',
					label_sname: '平均',
					label_class: 'success'
				}
			},
			caseCount: 0,
			newCaseCount: 0,
			issue: 0,
			cases: [
				{
					label: '项目',
					param: 'project',
					align: 'center'
				},
				{
					label: '脚本数量',
					param: 'count_case',
					align: 'center'
				}
			],
			back: [{
					label: '项目',
					param: 'project',
					align: 'center'
				},
				{
					label: '回退问题检出个数',
					param: 'reg_issue',
					align: 'center'
				}],
			caseSize: 10,
			caseCurrent: 1,
			caseTotal: 0,
			userTable: [],
			userObj: [
				{
					label: '人员',
					param: 'username',
					align: 'center'
				},
				{
					label: '登录次数',
					param: 'login_count',
					align: 'center',
					sortable: true,
					render: (row) => {
						return `${row.login_count}次`
					}
				},
				{
					label: '脚本上传',
					param: 'script_upload_count',
					align: 'center',
					sortable: true,
					render: (row) => {
						return `${row.script_upload_count}次`
					}
				},
				{
					label: '脚本上传个数',
					param: 'case_count',
					align: 'center',
					sortable: true,
					render: (row) => {
						return `${row.case_count}个`
					}
				},
				{
					label: '脚本更新',
					param: 'script_update_count',
					align: 'center',
					sortable: true,
					render: (row) => {
						return `${row.script_update_count}次`
					}
				},
				{
					label: '脚本删除',
					param: 'script_delete_count',
					align: 'center',
					sortable: true,
					render: (row) => {
						return `${row.script_delete_count}次`
					}
				},
				{
					label: '设备注册',
					param: 'device_register_count',
					align: 'center',
					sortable: true,
					render: (row) => {
						return `${row.device_register_count}次`
					}
				},
				{
					label: '创建任务',
					param: 'create_task_count',
					align: 'center',
					sortable: true,
					render: (row) => {
						return `${row.create_task_count}次`
					}
				}
			],
			userSize: 10,
			userCurrent: 1,
			userTotal: 0,
			newcaseSize: 10,
			newcaseCurrent: 1,
			newcaseTotal: 0,
			coverSize: 10,
			coverCurrent: 1,
			coverTotal: 0,
			backSize: 10,
			backCurrent: 1,
			backTotal: 0,
			newCase: [
				{
					label: '项目',
					param: 'project',
					align: 'center'
				},
				{
					label: '新增脚本数量',
					param: 'new_case',
					align: 'center'
				}
			],
			coverRate: [
				{
					label: '项目',
					param: 'project',
					align: 'center'
				},
				{
					label: '自动化测试覆盖率',
					param: 'cover_rate',
					align: 'center',
					render: (row) => {
						return Number(row.cover_rate*100).toFixed(2) + '%'
					}
				}
			],
			caseRank: [],
			newCaseRank: [],
			coverRateRank: [],
			backRank: [],
			labelsData: {},
			passLabel: {},
			kpi: {},
			currentPage: 1,
			currentSize: 10,
			activeName: 0,
			active: '1',
			caseSelected: '脚本数量',
			passSelected: '自动化测试覆盖率',
			currentData: [],
			tableData: [],
			dataCount: 0,
			dataEmpty: true,
			topChartData: {
					columns: ['project', 'pass_rate'],
					rows: []
			},
			topChartData2: {
				columns: ['project', 'pass_rate'],
				rows: []
			},
			topChartData3: {
				columns: ['project', 'pass_rate'],
				rows: []
			},
			frequencyChartData: {
				columns: ['project', 'test_frequency'],
				rows: []
			},
			chartSettings: {
				labelMap: {
					pass_rate: 'verify-build平均通过率(%)',
					count_case: '脚本数量',
					new_case: '新增脚本数量',
					cover_rate: '自动化测试覆盖率',
					reg_issue: '回退问题检出个数'
				}
			},
			chartSettings2: {
				labelMap: {
					pass_rate: 'daily-build平均通过率(%)',
				}
			},
			chartSettings3: {
				labelMap: {
					pass_rate: 'release-build平均通过率(%)',
					test_frequency: '自动化测试频率(总次数/平均每天)'
				}
			},
			topExtend: {
						series: {
							barMaxWidth: 20,
					},
			},
			autoChartData: {
				columns: [
					'update_date',
					'daily_pass_rate',
				],
				rows: []
			},
			autoChartData2: {
				columns: [
					'update_date',
					'verify_pass_rate',
				],
				rows: []
			},
			autoChartData3: {
				columns: [
					'update_date',
					'release_pass_rate'
				],
				rows: []
			},
			autoChartSettings: {
				yAxisType: ['percent'],
				labelMap: {
					// av_pass_rate: '平均通过率',
					verify_pass_rate: 'verify-build平均通过率(%)',
					daily_pass_rate: 'daily-build平均通过率(%)',
					release_pass_rate: 'release-build平均通过率(%)'
				}
			}
        }
	},
	methods: {
		getFix(data) {
				if (null == data || "undefined" == typeof(data) || "" == data) {
						return 0;
				} else {
						return data
				}
		},
		getPrecent(num) {
			let str = Number(num*100).toFixed(2)
            return str + '%'
		},
		formatter_rate(value) {
				let str
				if(value) {
					str = Number(value*100).toFixed(2)
				} else {
					str = '0.00'
				}
				return str
		},
		init_datas: function(departmentId, dates) {
			this.get_compare_data(departmentId, dates);
			this.getRanking(departmentId, dates);
			this.get_summary(departmentId, dates);
			this.get_daily_data(departmentId, dates)
			this.getNewCase(departmentId, dates)
			this.getIssue(departmentId, dates)
			this.getNewTable(departmentId, dates)
			this.getResults(departmentId, dates)
			this.getLabelKpi('AutoTest')
		},
		handleSortChange(val) {
			let key = val['prop']
			let compare1 = function(obj1, obj2) {
				let val1 = obj1[key]
				let val2 = obj2[key]
				if (val1 < val2) {
					return -1
				} else if (val1 > val2) {
					return 1
				} else {
					return 0
				}
			}
			let compare2 = function(obj1, obj2) {
				let val1 = obj1[key]
				let val2 = obj2[key]
				if (val1 < val2) {
					return 1
				} else if (val1 > val2) {
					return -1
				} else {
					return 0
				}
			}
			if (val['order'] === 'ascending') {
				this.userTable = this.userTable.sort(compare1)
			} else if (val['order'] === 'descending') {
				this.userTable = this.userTable.sort(compare2)
			} else {
				key = 'login_count';
				this.userTable = this.userTable.sort(compare2)
			}
		},
		sortChange: function(val) {
			var key = val['prop'];
			var compare1 = function(obj1, obj2) {
				var val1 = obj1[key];
				var val2 = obj2[key];
				if (val1 < val2) {
					return -1;
				} else if (val1 > val2) {
					return 1;
				} else {
					return 0;
				}
			};
			var compare2 = function(obj1, obj2) {
				var val1 = obj1[key];
				var val2 = obj2[key];
				if (val1 < val2) {
					return 1;
				} else if (val1 > val2) {
					return -1;
				} else {
					return 0;
				}
			};
			var arr = this.tableData;
			if (val['order'] === 'ascending') {
				this.currentData = pagingData(arr.sort(compare1), this.dataCount, this.currentPage, this.currentSize);
			} else if (val['order'] === 'descending') {
				this.currentData = pagingData(arr.sort(compare2), this.dataCount, this.currentPage, this.currentSize);
			} else {
				key = 'update_date';
				this.currentData = pagingData(arr.sort(compare2), this.dataCount, this.currentPage, this.currentSize);
			}
		},
		handleSizeChange: function(size) {
			this.currentSize = size;
			this.currentData = pagingData(this.tableData, this.dataCount, this.currentPage, this.currentSize)
		},
		handleCurrentChange: function(page) {
			this.currentPage = page;
			this.currentData = pagingData(this.tableData, this.dataCount, this.currentPage, this.currentSize)
		},
		getPrecentArr(arr) {
			if(arr.length) {
				arr.forEach((val) => {
					if(val.pass_rate) {
						val.pass_rate = Number(val.pass_rate*100)
					}
				})
			}
			return arr
		},
		getLabelKpi(type) {
			getKpi(type).then(res => {
				if (res.status == 200) {
						if (res.data.code === 200) {
							this.kpi = res.data.data
						}
				}
			})
		},
		caseCurrentChange(val) {
			this.caseCurrent = val
		},
		caseSizeChange(val) {
			this.caseSize = val
		},
		coverCurrentChange(val) {
			this.coverCurrent = val
		},
		coverSizeChange(val) {
			this.coverSize = val
		},
		userCurrentChange(val) {
			this.userCurrent = val
		},
		userSizeChange(val) {
			this.userSize = val
		},
		backCurrentChange(val) {
			this.backCurrent = val
		},
		backSizeChange(val) {
			this.backSize = val
		},
		newcaseCurrentChange(val) {
			this.newcaseCurrent = val
		},
		newcaseSizeChange(val) {
			this.newcaseSize = val
		},
		sortByKey(array,key){
			return array.slice().sort(function(a,b){
				var x = a[key];
				var y = b[key];
				return((x>y)?-1:((x<y)?1:0));
			})
		},
		ranking(arr, type) {
			let list = []
			if(arr) {
				if(type == "count_case") {
					list = arr.map(({project, count_case}) => {
						return {project, count_case}
					})
				} else if(type == "new_case") {
					list = arr.map(({project, new_case}) => {
						return {project, new_case}
					})
				} else if(type == "cover_rate") {
					list = arr.map(({project, cover_rate}) => {
						return {project, cover_rate}
					})
				}
			}
			list = this.sortByKey(list,type)
			//console.log(list)
			return list
		},
		getNewTable(departmentId, dates) {
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/automate/dept/behavior?departmentId=' +
                departmentId + '&date=' + dates,
				{headers: getHeader()})
				.then(res => {
					if (res.status == 200) {
						if (res.data.code === 200) {
							this.userTable = res.data.data
							if(this.userTable && this.userTable.length) {
								this.userTotal = this.userTable.length
							}
						}
					}
				}).catch(error => {
					console.log(error)
				})
		},
		getNewCase(departmentId, dates) {
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/automate/dept/case/ranking?departmentId=' +
                departmentId + '&date=' + dates,
				{headers: getHeader()})
				.then(res => {
					if (res.status == 200) {
						if (res.data.code === 200) {
							this.caseCount = res.data.case_count
							this.newCaseCount = res.data.new_case_count
							this.caseRank = this.ranking(res.data.case_rank, 'count_case')
							if(this.caseRank && this.caseRank.length) {
								this.caseTotal = this.caseRank.length
							}

							this.newCaseRank = this.ranking(res.data.case_rank, 'new_case')
							if(this.newCaseRank && this.newCaseRank.length) {
								this.newcaseTotal = this.newCaseRank.length
							}
							this.coverRateRank = this.ranking(res.data.case_rank, 'cover_rate')
							if(this.coverRateRank && this.coverRateRank.length) {
								this.coverTotal = this.coverRateRank.length
							}
						}
					}
				}).catch(error => {
					console.log(error)
				})
		},
		getIssue(departmentId, dates) {
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/automate/dept/issue/ranking?departmentId=' +
                departmentId + '&date=' + dates,
				{headers: getHeader()})
				.then(res => {
					if (res.status == 200) {
						if (res.data.code === 200) {
							this.issue = res.data.reg_count
							this.backRank = res.data.issue_rank
							if(this.backRank && this.backRank.length) {
								this.backTotal = this.backRank.length
							}
						}
					}
				}).catch(error => {
					console.log(error)
				})
		},
		getResults(departmentId, dates) {
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/automate/dept/result/ranking?departmentId=' +
                departmentId + '&date=' + dates,
				{headers: getHeader()})
				.then(res => {
					if (res.status == 200) {
						if (res.data.code === 200) {
							this.passLabel = res.data.data
						}
					}
				}).catch(error => {
					console.log(error)
				})
		},
		getRanking(departmentId, dates) {
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/automate/dept/ranking?departmentId=' +
                departmentId + '&date=' + dates,
				{headers: getHeader()})
				.then(res => {
					if (res.status == 200) {
						if (res.data.code === 200) {
							this.topChartData.rows = this.getPrecentArr(res.data.verify_ranking).reverse()
							this.topChartData2.rows = this.getPrecentArr(res.data.daily_ranking).reverse()
							this.topChartData3.rows = this.getPrecentArr(res.data.release_ranking).reverse()
							this.frequencyChartData.rows = res.data.test_frequency_ranking.reverse()
						}
					}
				})
		},
		get_compare_data(departmentId, dates) {
			this.currentData = [];
			this.tableData = [];
			this.dataEmpty = true;
			var self = this
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/automate/dept/compare?departmentId=' +
                departmentId + '&date=' + dates,
				{headers: getHeader()})
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							for (var i = 0; i < data.length; i++) {
								if(data[i].verify_pass_rate) {
									data[i].verify_pass_rate = self.getPrecent(data[i].verify_pass_rate)
								}
								if(data[i].daily_pass_rate) {
									data[i].daily_pass_rate = self.getPrecent(data[i].daily_pass_rate)
								}
								if(data[i].release_pass_rate) {
									data[i].release_pass_rate = self.getPrecent(data[i].release_pass_rate)
								}
								var tableDict = {
                                    project_name: data[i]['project'],
									test_count: data[i]['test_count'] + '次',
									verify_test_count: data[i]['verify_test_count'] + '次',
									daily_test_count: data[i]['daily_test_count'] + '次',
									release_test_count: data[i]['release_test_count'] + '次',
									verify_pass_rate: data[i]['verify_pass_rate'],
									daily_pass_rate: data[i]['daily_pass_rate'],
									release_pass_rate: data[i]['release_pass_rate']
								};
								self.tableData.push(tableDict);
							};
							self.dataCount = self.tableData.length;
							self.currentPage = 1;
							self.currentSize = 10;
							self.dataEmpty = false;
							if (self.dataCount === 0) {
								self.currentData = [];
								self.dataEmpty = true;
							} else {
								self.currentData = pagingData(self.tableData, self.dataCount, self.currentPage, self.currentSize)
							}
							//self.topChartData.rows = data.slice(0, 10)
						}
					}
				})
				.catch(function(err) {
					console.log(err);
				});
		},
		get_daily_data(departmentId, dates) {
			var _self = this
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/automate/dept/daily?departmentId=' +
                departmentId + '&date=' + dates,
				{headers: getHeader()})
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							_self.autoChartData.rows = data
							_self.autoChartData2.rows = data
							_self.autoChartData3.rows = data
						}
					}
				})
				.catch(function(err) {
					console.log(err);
				});
		},
		get_summary(departmentId, dates) {
			var _self = this
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/automate/dept/summary?departmentId=' +
                departmentId + '&date=' + dates,
				{headers: getHeader()})
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							_self.labelsData = data
						}
					}
				})
				.catch(function(err) {
					console.log(err);
				});
		}
	},
	watch: {
        params: {
			handler: function(val) {
                const departmentId = val.departmentId === 'undefined' ? '' : val.departmentId;
                const dates = val.time === 'undefined' ? '' : val.time;
				this.init_datas(departmentId, dates);
			},
			deep: true
		},
		activeName(v) {
      this.$nextTick(() => {
				this.$refs[`vline${v}`].echarts.resize()
				this.$refs[`lline${v}`].echarts.resize()
			})
    }
	},
	mounted() {
        const departmentId = this.params.departmentId === 'undefined' ? '' : this.params.departmentId;
        const dates = this.params.time === 'undefined' ? '' : this.params.time;
		// this.init_datas(departmentId, dates);
	}
}
</script>
